<template>
  <div class="findBox">
    <van-row class="van_header_1"></van-row>
    <van-row class="van_header">
      <van-col span="4" class="van_jia">
        <van-icon name="add-o" @click="tianjia" />
      </van-col>
      <van-col span="20">
        <van-row span="24">
          <van-tabs v-model="activeName">
            <van-tab title="关注" to="follow" name="follow"></van-tab>
            <van-tab title="发现" name="found" to="found"></van-tab>
            <van-tab title="深圳" to="shenzhen" name="shenzhen"></van-tab>
          </van-tabs>
        </van-row>
      </van-col>
    </van-row>

    <van-row type="flex">
      <van-col span="1"></van-col>
      <van-col span="22">
        <div class="main">
          <van-cell-group inset class="main_first" v-for="(item,index) in tableData" :key="index">
            <van-cell class="img">
              <router-link to="/activity">
              <img
                :src="item.src"
                alt=""
              />
              </router-link>
            </van-cell>
            <van-row type="flex" justify="center" class="right">
              <van-col span="14">
                <p>{{item.title}}</p>
              </van-col>
              <van-col span="2"></van-col>
              <van-col span="6">
                <van-row type="flex" justify="right">
                  <van-col span="24">活动:体察</van-col>
                </van-row>
              </van-col>
            </van-row>
            <van-row type="flex" class="left">
              <van-col span="1"></van-col>
              <van-col span="23">
                <div>
                  <span>点赞</span>
                  <span>评论</span>
                  <span>分享</span>
                </div>
              </van-col>
            </van-row>
            <van-row type="flex" class="bottom">
              <van-col span="1"></van-col>
              <van-col span="22">
                <van-field center autosize clearable placeholder="请输入内容">
                 
                </van-field>
              </van-col>
              <van-col span="1"></van-col>
            </van-row>
          </van-cell-group>
        </div>
      </van-col>
      <van-col span="1"></van-col>
    </van-row>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "../../components/Footer/footer.vue";
export default {
  data() {
    return {
      activeName: "shenzhen",
      value: "",
      tableData: [
        {
          title: "新品炭烧腰果试尝（深圳实体店）", 
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.360buyimg.com%2FpopWaterMark%2Fjfs%2Ft1300%2F184%2F940410525%2F702482%2F70cfee29%2F55e40a05N18f8ee21.png&refer=http%3A%2F%2Fimg30.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814204&t=717ebf7de6e2048b5c23ed6c83112fd0",
        },
        {
          title: "实体店比较试验购样(武汉实体店)",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FbkErMJaQoYuV9MuiAyJngBd_jwwOfwRor87xq_TxMPDV-Oie0zXWa0hU-eqGUQgMjoJrvItByyS4HHaWdXyO_I7F0UeCRQYMHlogzbt7GHgNNiIYVnHvzugZCuBITtvjski7YaLlHpkrQUr5euoQrg.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814305&t=95619164bd53eb23ffba21f8147fbb3f",
        },
        {
          title: "面膜比较试验购样(澳门实体店)",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F4034970a304e251f3c72dd53a586c9177e3e5397&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814305&t=b338524d20365e613f7a5f2534c49c02",
        },
        {
          title: "新年新气象，虎年虎虎生威(全网实体店)",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lkkdesign.com%2FUploads%2Fproduct%2F58467b54baf70.png&refer=http%3A%2F%2Fwww.lkkdesign.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814305&t=2b0949b8a92b7252166f35189ae2f2dc",
        },
        {
          title: "面膜比较试验购样(澳门实体店)",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.canyincy.com%2Fuploads%2Fallimg%2F210912%2F1-210912103220N1.jpg&refer=http%3A%2F%2Fwww.canyincy.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642814305&t=a85e2701dc6ec87c5febfca0497041cc",
        },
      ],
    };
  },
  components: {
    Footer,
  },
  methods:{
    // 添加
    tianjia() {
      this.$router.push({ path: "/create" }).catch((error) => error);
    },
  }
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.findBox {
  overflow: hidden;
  // .van-tabs{

  // }
  //  /deep/.van-tabs__line {
  //           background-color: greenyellow;
  //         }
   .van_header_1 {
    width: 100%;
    height: 52.32px;
  }
  .van_header {
    width: 100%;
    height: 52.32px;
    display: flex;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 1;
    .van_jia {
      display: flex;
      justify-content: center;
      margin-left: 5px;
      .van-icon {
        font-size: 20px;
        color: silver;
        font-weight: bold;
      }
    }

    .van-col {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      .van-row {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        .van-tabs {
          width: 100%;
          /deep/.van-tabs__line {
            background-color: rgba(67, 207, 124, 1);
          }
        }
      }
    }
  }
  .van-tabs__wrap {
    .van-tabs__nav {
      .van-tabs__line {
        background-color: rgba(67, 207, 124, 1) !important ;
      }
    }
  }
  .van-search {
    margin: 0;
  }

  .main {
    .main_first {
      height: 338px;
      text-align: center;
      margin: 6px auto;
      border: 1px solid #d9d9d9;
      .img {
        width: 100%;
        height: 186px;
        padding: 0;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
          text-align: center;
        }
      }
      .right {
        .van-col {
          p {
            text-align: left;
            margin-top: 10px;
            font-size: 18px;
          }
          .van-row {
            .van-col {
              text-align: center;
              margin-top: 10px;
              font-size: 14px;
              .photo {
                height: 30px;
              }
            }
          }
        }
      }
      .left {
        text-align: left;
        margin-top: 10px;
        font-size: 10px;
      }
      .bottom {
        .van-col {
          .van-field {
            margin-top: 4px;
            height: 35.2px;
            border: 1px solid #c9c9c9;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>